import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider - 音量控制")
    color: "#1e1e2e"

    RowLayout {
        anchors.centerIn: parent
        width: parent.width * 0.8
        spacing: 10

        // 音量图标
        Image {
            id: volumeIcon
            source: volumeSlider.value <= 0 ? "/icons/mute.png" : "/icons/volume.png"
            width: 24
            height: 24
            Layout.alignment: Qt.AlignVCenter

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (volumeSlider.value > 0) {
                        volumeSlider.lastValue = volumeSlider.value
                        volumeSlider.value = 0
                    } else {
                        volumeSlider.value = volumeSlider.lastValue || 50
                    }
                }
            }
        }

        // 音量滑块
        Slider {
            id: volumeSlider
            Layout.fillWidth: true
            padding: 0
            property real lastValue: 50

            from: 0
            to: 100
            value: 60
            stepSize: 1
            live: true

            // 自定义背景
            background: Rectangle {
                x: volumeSlider.leftPadding
                y: volumeSlider.topPadding + (volumeSlider.availableHeight - height) / 2
                width: volumeSlider.availableWidth
                height: 8
                radius: 4
                color: "#313244"

                // 音量进度条
                Rectangle {
                    width: volumeSlider.visualPosition * parent.width
                    height: parent.height
                    radius: 4
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: "#89b4fa" }
                        GradientStop { position: 1.0; color: "#cba6f7" }
                    }
                }
            }

            // 自定义手柄
            handle: Rectangle {
                x: volumeSlider.leftPadding + volumeSlider.visualPosition * (volumeSlider.availableWidth - width)
                y: volumeSlider.topPadding + volumeSlider.availableHeight / 2 - height / 2
                width: 16
                height: 16
                radius: 8
                color: volumeSlider.pressed ? "#cba6f7" : "#f9f9f9"
                border.color: "#89b4fa"
                border.width: 2

                // 添加鼠标区域以确保可以拖动
                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    drag {
                        target: parent
                        axis: Drag.XAxis
                        minimumX: 0
                        maximumX: volumeSlider.availableWidth - parent.width
                    }
                    onPositionChanged: {
                        if (drag.active) {
                            volumeSlider.value = (parent.x / (volumeSlider.availableWidth - parent.width)) * (volumeSlider.to - volumeSlider.from)
                        }
                    }
                }
            }
        }

        // 音量值显示
        Text {
            text: Math.round(volumeSlider.value) + "%"
            color: "#cdd6f4"
            font.pixelSize: 14
            Layout.alignment: Qt.AlignVCenter
            Layout.preferredWidth: 40
        }
    }
} 